<template>
  <el-select clearable
             filterable
             v-bind="$attrs"
             @input="handleInput">
    <el-option v-for="item in dictionaryOptions"
               :key="item.label"
               :label="item.label"
               :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "DictionarySelect",
  inheritAttrs: true,
  props: {
    options: {
      type: Object
    },
    group: {
      type: String
    }
  },
  computed: {
    ...mapState({
      dictionaries: (state) => state.basic.dictionaries
    }),
    dictionaryOptions () {
      let dictionaryData = this.dictionaries?.[this.group] || [];
      let dictionaryOptions =
        dictionaryData?.length > 0 ? dictionaryData[0].options : [];
      if (dictionaryOptions) {
        return dictionaryOptions.map((item) => {
          return { label: item.name, ...item };
        });
      }
      return [];
    }
  },
  created () {
    this.loadDictionaries();
  },
  methods: {
    ...mapActions({
      loadDictionaries: "basic/loadDictionaries"
    }),
    handleInput (value) {
      this.$emit("input", value);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
